<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .f1{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
        }
        .s1{
            width: 150px;
            height: 150px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div class="f1">
        father
        <div class="s1">son</div>
    </div>
</body>
<script>
    var f1=document.getElementsByClassName('f1')[0];
    var s1=document.getElementsByClassName('s1')[0];
    //事件冒泡:从某个元素事件,依次向父元素执行
    f1.addEventListener('click',function(e){
        console.log('点击了father');
    },true);
    s1.addEventListener('click',function(e){
        console.log('点击了son');
    },false)
    document.addEventListener('click',function(e){
        console.log('文档对象点击了');
    },false)

    // f1.onclick=function(e){
    //     console.log('点击了father呀');
    // }
    // s1.onclick=function(e){
    //     console.log('点击了son呀');
    // }
</script>
</html>